<script lang="ts" setup>
import IndexFooter from "../Common/IndexFooter.vue";
import PriceCard from "./PriceCard.vue";
import { ref } from "vue";
import { planIntro, PriceCardItemType } from "../../../utils/ts/price";

const dataList = ref<PriceCardItemType[]>(planIntro);
</script>
<template>
  <!-- style="background: url(/index/priceBg.svg) right bottom no-repeat" -->
  <div class="p-5 min-h-200 md:p-10 max-w-480 m-auto">
    <img
      src="/index/priceBg.svg"
      alt=""
      class="absolute -right-20 -z-1 hidden md:block"
    />
    <h2 class="text-center text-5xl font-bold mt-5 text-stone-800 mb-20">
      套餐定价
    </h2>

    <div class="flex flex-wrap m-auto flex-col md:flex-row w-full md:w-auto">
      <PriceCard
        v-for="(item, index) in dataList"
        :item="item"
        :key="index + 'price'"
      />
    </div>
  </div>
  <IndexFooter />
</template>
<style lang="scss" scoped></style>
